<template>
    <div>
        <!-- 新增一级菜单按钮 -->
        <div>
            <el-button
                       @click="handleShowAddMenuDialog(0)"
                       style="margin-bottom:10px;"
                       type="success"
                       size="small"
                       >
                添加
            </el-button>
        </div>
        <!-- 菜单属性数据表格 -->
        <div>
            <el-table
                      :data="menus"
                      style="width: 100%; margin-bottom: 20px"
                      row-key="id"
                      border
                      default-expand-all
                      >
                <el-table-column prop="title" label="菜单标题" sortable />
                <el-table-column prop="component" label="路由名称" sortable />
                <el-table-column prop="sortValue" label="排序" sortable />
                <el-table-column prop="status" label="状态" sortable>
                    <template #default="scope">
                        {{ scope.row.status === 1 ? '正常' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" sortable />
                <el-table-column label="操作" width="250">
                    <template #default="scope">
                        <el-button
                                   type="success"
                                   size="small"
                                   @click="handleShowAddMenuDialog(scope.row.id)"
                                   >
                            添加下级菜单
                        </el-button>
                        <el-button size="small" @click="handleShowEditDialog(scope.row)">
                            修改
                        </el-button>
                        <el-button
                                   size="small"
                                   type="danger"
                                   @click="handleDelete(scope.row)"
                                   >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增/更新 对话框表单 -->
        <div>
            <el-dialog v-model="dialogFormVisible" :title="title">
                <el-form>
                    <el-form-item label="菜单标题" :label-width="formLabelWidth">
                        <el-input v-model="menu.title" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="路由名称" :label-width="formLabelWidth">
                        <el-input v-model="menu.component" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth">
                        <el-input v-model="menu.sortValue" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="menu.status" class="ml-4">
                            <el-radio :label="1" size="large">正常</el-radio>
                            <el-radio :label="0" size="large">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleSaveOrUpdate">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref , onMounted } from "vue"
import { listNestedMenus,save,update, deleteSysMenuById,getMenuById} from '@/api/sysMenu'
import { ElMessage, ElMessageBox } from 'element-plus'

const title = ref('添加')
const dialogFormVisible = ref(false)
const menu=ref({
    status:1
})
const handleDelete=row=>{
    ElMessageBox.confirm(
    '确定删除该菜单吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        await deleteSysMenuById(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      fetchData()
    })
    .catch((action) => {
        if (action === 'cancel'){
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    }
    })
}


const handleSaveOrUpdate = () => {
  if (!menu.value.id) {
    handleSaveMenu()
  }else{
    handleUpdateMenu()
  } 
}

const handleSaveMenu = async () => {
  await save(menu.value)
  ElMessage.success('操作成功')
  fetchData()
  dialogFormVisible.value = false
}
const handleShowAddMenuDialog = (id) => {
  menu.value={
    status:1
  }
  if(id==0){
    title.value = '添加一级菜单'
  }else{
    title.value = '添加下级菜单'
  }
  menu.value.parentId=id
  dialogFormVisible.value = true
  
}

const menus = ref([])
onMounted(() => {
    fetchData()
})


const fetchData = async () => {
  const { code, data, message } = await listNestedMenus()
  menus.value = data
}

const handleShowEditDialog = async row => {
        menu.value = row
        title.value = '修改菜单'
        dialogFormVisible.value = true
    }

    const handleUpdateMenu = async () => {
        await update(menu.value)
        ElMessage.success('更新成功')
        fetchData()
        dialogFormVisible.value = false
    }
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>